<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <title>cs2</title>
    <script src="Vue/vue.js"></script>
    <script src="Vue/vue-router.js"></script>
    <script src="美团/mtbase.js"></script>
    <style>
        *,*::after,*::before{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html{
            font-size: 100px;
        }

        body{
            font-size: .3rem;//0.3*100
        }

        .fass{
            display: flex;
            flex-direction: column;
        }
        .top {
            width: 100%;
            height: 1rem;
            background-color: aquamarine;
        }
        .content{
            width: 100%;
            background-color: #00d20d;
            overflow: auto;
        }
        .div1{
              width: 100%;
              height: 50px;
              background-color: #00aaee;
          }
        .div2{
            width: 100%;
            height: 50px;
            background-color: #d32f2f;
        }
        .bottom{
            width: 100%;
            height: 50px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="bdd">
    <router-view></router-view>
</div>
<template id="fa">
    <div class="fas">
        <div class="top">

        </div>
        <div class="content">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div1"></div>
            <div class="div2"></div>
        </div>

    </div>
</template>

<script>
    var fa = Vue.extend({
        template: "#fa",
        data() {
            return {}
        },
        mounted() {
            this.configure();
        },
        methods:{
            configure() {
                //设置body的高度等于window高度
                var heights = window.innerHeight;
                document.body.style.height = heights + "px";
                //2. 设置content块等于body的高度减去一头一尾的高度
                var content_height = 0;
                content_height = heights - 50;
                var contentDom = document.querySelector(".content");
                contentDom.style.height = content_height + "px";
            },
        }
    });

    var router = new VueRouter({
        routes: [
            {
                path: "/", component: fa, name: "fas",
            },
        ]
    });
    var vue = new Vue({
        el: "#bdd",
        router,
        data: {},
        methods: {}
    });
</script>
</body>
</html>